<template>
  <div class="app-container">
    <h1>富文本的使用</h1>
     <quill-editor v-model="content" :options="editorOption"></quill-editor>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { addQuillTitle } from '@/modules/quill-title.js'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      content: null,
      editorOption: {}

    }
  },
  mounted () {
    addQuillTitle()
  },
  methods:{
     //失去焦点事件
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      //获得焦点事件
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      // 准备富文本编辑器
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      },
      //内容改变事件
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html
      }
————————————————
版权声明：本文为CSDN博主「Lechar0327」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liuqiao0327/article/details/107126784
  }
}
</script>
<style lang="scss" scoped></style>
